<template>
	<view style="height: 100%;">
		<view class="base-layout">
			<view class="layout1">
				<view class="title">姓名</view>
				<input placeholder="收货人姓名" @input="inputName" :value="name">
			</view>
			<view class="line"></view>
			<view class="layout1">
				<view class="title">电话</view>
				<input placeholder="收货人手机号" @input="inputPhone" :value="phone"/>
			</view>
			<view class="line"></view>
			<view class="layout1">
				<view class="title">地区</view>
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
					<input style="width: 280px;" placeholder="选择省市区" :value="cityDetail" @click="initCity" disabled="true"/>
				</picker>
			</view>
			<view class="line"></view>
			<view class="layout1">
				<view class="title">详细地址</view>
				<input style="width: 280px;" placeholder="街道门牌号" @input="inputDetail" :value="detail"/>
			</view>
			<view class="line"></view>
			<view class="layout1">
				<view class="title">邮政编码</view>
				<input placeholder="邮政编码" @input="inputMailCode" :value="mailCode"/>
			</view>
		</view>
		<view class="base-layout">
			<view class="layout1">
				<view style="display: flex; width: 50%; margin-top: auto; margin-bottom: auto;">设为默认地址</view>
				<switch style="margin-right: 10px; margin-left: auto;" :checked="isDefault" @change="editDefalut"/>
			</view>
		</view>
		<view style="background-color: red; bottom: 90px;" class="button" @click="save">保存</view>
		<view style="background-color: white; bottom: 30px; color: black;" class="button" @click="remove">删除</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	
	export default {
		data() {
			return {
				id: null,
				name: null,
				phone: null,
				province: null,
				city: null,
				area: null,
				cityDetail: null,
				detail: null,
				isDefault: false,
				mailCode: null,
				multiIndex: [0, 0, 0],
				multiArray: [[],[],[]],
				update: false
			}
		},
		methods: {
			async getAreaNameList(name) {
				return new Promise((resolve, reject) => {
					http.get('/address/area?name=' + name).then(res => {
						resolve(res.data)
					})
				})
			},
			
			async getProvinceList() {
				return new Promise((resolve, reject) => {
					http.get('/address/province').then(res => {
						resolve(res.data)
					})
				})
			},
			
			async bindMultiPickerColumnChange(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0:
					   this.multiIndex[1] = 0;
					   var province = this.multiArray[0][e.detail.value]
					   var cityList = await this.getAreaNameList(province);
					   this.multiArray[1] = cityList.data;
					   var city = this.multiArray[1][0];
					   var areaList = await this.getAreaNameList(city);
					   this.multiArray[2] = areaList.data;
					   break;
					case 1:
					   var city = this.multiArray[1][e.detail.value]
					   var areaList = await this.getAreaNameList(city);
					   this.multiArray[2] = areaList.data;
					   break;
				}
				this.province = this.multiArray[0][this.multiIndex[0]];
				this.city = this.multiArray[1][this.multiIndex[1]];
				this.area = this.multiArray[2][this.multiIndex[2]];
				this.cityDetail = this.province + '/' + this.city + '/'+ this.area;
			},
			
			initCity() {
				if (null == this.province) {
					this.province = this.multiArray[0][this.multiIndex[0]];
				}
				if (null == this.city) {
					this.city = this.multiArray[1][this.multiIndex[1]];
				}
				if (null == this.area) {
					this.area = this.multiArray[2][this.multiIndex[2]];
				}
				this.cityDetail = this.province + '/' + this.city + '/'+ this.area;
			},
			
			inputName(e) {
				this.name = e.detail.value
			},
			
			inputPhone(e) {
				this.phone = e.detail.value
			},
			
			inputDetail(e) {
				this.detail = e.detail.value
			},
			
			inputMailCode(e) {
				this.mailCode = e.detail.value
			},
			
			editDefalut(e) {
				this.isDefault = e.detail.value
			},
			
			save() {
				if (this.name == null || this.name == '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'error'
					})
					return;
				}
				
				if (this.phone == null || this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'error'
					})
					return;
				}
				
				var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'error'
					})
					return;
				}
				
				if (this.province == null || this.province == ''
				    || this.city == null || this.city == ''
					|| this.area == null || this.area == '') {
					uni.showToast({
						title: '请选择省市区',
						icon: 'error'
					})
					return;
				}
				
				if (this.detail == null || this.detail == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'error'
					})
					return;
				}
				
				if (this.mailCode == null || this.mailCode == '') {
					uni.showToast({
						title: '请输入邮编',
						icon: 'error'
					})
					return;
				}
				
				if (this.update) {
					http.put('/address/edit', {
						id: this.id,
						name: this.name,
						phone: this.phone,
						province: this.province,
						city: this.city,
						area: this.area,
						detail: this.detail,
						mailCode: this.mailCode,
						isDefault: this.isDefault
					}).then(res => {
						if (res.data.code === 200) {
							uni.navigateBack();
							uni.showToast({
								title: '修改成功'
							})
						}
					})
				} else {
					http.post('/address/add', {
						name: this.name,
						phone: this.phone,
						province: this.province,
						city: this.city,
						area: this.area,
						detail: this.detail,
						mailCode: this.mailCode,
						isDefault: this.isDefault
					}).then(res => {
						if (res.data.code === 200) {
							uni.navigateBack();
							uni.showToast({
								title: '添加成功'
							})
						}
					})
				}
			},
			
			remove() {
				if (null == this.id) {
					uni.navigateBack();
					return;
				}
				
				http.delete('/address/delete?id=' + this.id).then(res => {
					if (res.data.code === 200) {
						uni.navigateBack();
					}
				})
			}
		},
		async mounted() {
			var provinceList = await this.getProvinceList();
			this.multiArray[0] = provinceList.data;
			if (this.multiArray[0].length != 0) {
				var cityList = await this.getAreaNameList(this.multiArray[0][0]);
				this.multiArray[1] = cityList.data;
				if (this.multiArray[1].length != 0) {
					var areaList = await this.getAreaNameList(this.multiArray[1][0]);
					this.multiArray[2] = areaList.data;
				}
			}
		},
		onLoad(options) {
			if (null != options.address) {
				let address = JSON.parse(decodeURIComponent(options.address));
				this.id = address.id;
				this.name = address.name;
				this.phone = address.phone;
				this.province = address.province;
				this.city = address.city;
				this.area = address.area;
				this.detail = address.detail;
				this.mailCode = address.mailCode;
				this.isDefault = address.isDefault;
				this.cityDetail = this.province + '/' + this.city + '/'+ this.area;
				this.update = true;
			}
		}
	}
</script>

<style>
	.base-layout {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.layout1 {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 15px;
		margin-bottom: 15px;
		font-size: 16px;
		color: rgb(88, 88, 88)
	}
	.title {
		display: flex;
		width: 25%;
	}
	.line {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		height: 1px;
		background-color: gainsboro;
	}
	.button {
		display: flex;
		position: fixed;
		font-size: 18px;
		color: white;
		left: 10px;
		right: 10px;
		border-radius: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
		justify-content: center;
	}
</style>